<template>
  <div>
    <page-main>
      <el-row>
        <el-col :span="4">
          <span style="margin-right: 10px; width: 50px; line-height: 40px;">区域:</span>
          <el-cascader
            style="width: 200px;"
            :props="defaultProps"
            filterable
            :options="regionList"
            clearable
            v-model="searchForm.region_id"
          ></el-cascader>
        </el-col>
        <el-col :span="4" style="display: flex;">
          <span style="margin-right: 10px; width: 100px; line-height: 40px;">单位名称:</span>
          <el-input
            v-model="searchForm.yj_unit_name"
            clearable
            placeholder="请输入单位名称"
          ></el-input>
        </el-col>
        <el-col :span="4" style="display: flex;">
          <span style="line-height: 40px; margin-left: 10px; width: 100px;">监管等级:</span>
          <el-select v-model="searchForm.watch_level" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in watchLevelList"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="display: flex;">
          <span style="line-height: 40px; margin-left: 10px; width: 100px;">单位类型:</span>
          <el-select v-model="searchForm.yj_unit_type" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in unitTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="display: flex;">
          <span style="line-height: 40px; margin-left: 10px; width: 100px; margin-right: 4px;"
            >单位地址:</span
          >
          <el-input
            v-model="searchForm.yj_unit_address"
            clearable
            placeholder="请输入单位地址"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="margin-left: 10px;" @click="searchBtn">搜索</el-button>
          <el-button type="warning" @click="refreshBtn">重置</el-button>
        </el-col>
      </el-row>
    </page-main>
    <page-main>
      <el-table :data="tableData" border :default-sort="{ prop: 'id', order: 'descending' }">
        <el-table-column label="id" prop="unit_id" width="50" sortable></el-table-column>
        <el-table-column label="单位名称" prop="name"></el-table-column>
        <el-table-column label="单位全称" prop="full_name"></el-table-column>
        <el-table-column label="单位类型" prop="unit_type"> </el-table-column>
        <el-table-column label="监管等级" prop="watch_level"> </el-table-column>
        <el-table-column label="单位地址" prop="address"></el-table-column>
        <el-table-column label="联系人" prop="contact_name"></el-table-column>
        <el-table-column label="联系手机" prop="phone"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.page"
          :page-count="tableDataInfo.total_page"
          :total="tableDataInfo.total"
          background
          layout="total,prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  props: ['rows'],
  data() {
    return {
      tableData: [],
      tableDataInfo: '',
      searchForm: {
        yj_unit_name: '',
        watch_level: '',
        yj_unit_address: '',
        yj_unit_type: '',
        region_id: ''
      },
      watchLevelList: [],
      unitTypeList: [],
      defaultProps: {
        children: 'sub_item',
        label: 'name',
        value: 'id',
        checkStrictly: true
      },
      regionList: []
    }
  },
  created() {
    this.getLists()
    this.getWatchLevel()
    this.getRegion()
  },
  methods: {
    getRegion() {
      this.$api.get('/unit/Region/tree').then((res) => {
        this.delSubItem(res.data)
        this.regionList = res.data
      })
    },
    // 删除空的sub_item
    delSubItem(data) {
      data.forEach((item) => {
        if (item.sub_item.length < 1) return delete item.sub_item
        this.delSubItem(item.sub_item)
      })
    },
    //   搜索
    searchBtn() {
      this.getLists()
    },
    //   重置
    refreshBtn() {
      this.searchForm = {
        yj_unit_name: '',
        watch_level: '',
        yj_unit_address: '',
        yj_unit_type: '',
        region_id: ''
      }
      this.getLists()
    },
    handleCurrentChange(e) {
      this.getLists(e)
    },
    // 数据
    getLists(page) {
      let pageNum = 1
      if (page) {
        pageNum = page
      }
      let data = JSON.parse(JSON.stringify(this.searchForm))
      if (data.region_id) {
        data.region_id = data.region_id[data.region_id.length - 1]
      }
      let params = {
        page: pageNum,
        rows: this.rows ? this.rows : 13,
        ...data
      }
      this.$api.post('/unit/DeviceInstall/unitList', params).then((res) => {
        this.tableData = res.data.list
        this.tableDataInfo = res.data
      })
    },
    // 监管等级 单位类型
    getWatchLevel() {
      this.$api.post('/unit/UnitInformation/Setting').then((res) => {
        this.watchLevelList = res.data.watch_level
        this.unitTypeList = res.data.unit_type
      })
    }
  }
}
</script>

<style>
.block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
</style>
